<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <input type="text" class="keyword" placeholder="关键字">
        <input type="button" value="查找" onclick="query()">
        <input type="button" value="添加" onclick="add()">
    </div>
    <table>
        <thead>
            <tr>
                <th>id</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </thead>

        <tbody id="tbData"></tbody>

    </table>

</body>

</html>

<script src="./config/baseUrl.js"></script>
<script src="./js/jquery-3.6.0.min.js"></script>
<script src="./js/api.js"></script>
<script>
    // 初始化方法
    function init() {
        let keyword = $('.keyword').val() || ''
        console.log("keyword:" + keyword)
        $('.tbData').remove()
        getList(keyword).then(res => {
            console.log(res);
            res.forEach(item => {
                let html = `
                <tr class="tbData" key='${item.id}'>
                    <td>${item.name}</td>
                    <td>${item.age}</td>
                    <td>${item.className}</td>
                    <td>
                        <input type="button" value="编辑" onclick="edit(${item.id})"> 
                        <input type="button" value="删除" onclick="del(${item.id})"> 
                    </td>
                </tr>
                `
                $('#tbData').append(html)
            })
        })
    }
    $(function () {
        init()
    })

    // 查找
    function query(){
        let keyword = $('.keyword').val() || ''
        console.log(keyword)
        getList(keyword).then(()=>{
            init()
        })
    }
    // 删除
    function del(id){
        console.log(id);
        delStudent(id).then(res=>{
            $(`[key=${res.data}]`).remove()
        })
    }

    function add(){
        location.href= 'addOrEdit.html'
    }
    function edit(id){
        location.href= `addOrEdit.html?id=${id}`
    }
</script>